<template>
  <div>
    <el-dialog
      :title="namebox"
      v-model="isShowform"
      width="30%"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form label-width="100px">
        <el-form-item :label="name">
          <el-select
            style="width: 70%"
            v-model="layerId"
            placeholder="请选择"
            class="handle-select mr10"
          >
            <el-option
              v-for="item in box_list"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowform = false">取 消</el-button>
          <el-button type="primary" @click="handlesaveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    const add_form = context.attrs.add_form;
    const isShowform = ref(context.attrs.isShowform);
    const box_list = ref(context.attrs.box_list);
    console.log(add_form);
    const name = ref(context.attrs.name);
    const namebox = ref(context.attrs.namebox);
    const layerId = ref(context.attrs.layerId);
    const handleclose = () => {
      isShowform.value = false;
      context.emit("handleclose", isShowform.value);
    };
    const handlesaveEdit = () => {
      context.emit("handlesaveEdit", add_form, layerId.value);
    };
    return {
      box_list,
      name,
      layerId,
      namebox,
      add_form,
      isShowform,
      handleclose,
      handlesaveEdit,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
</style>
